<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SEVEN</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>



    <link rel="stylesheet" type="text/css" href="css/slider.css" />
    <script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
    <script type="text/javascript" src="js/jquery.cslider.js"></script>
    <script type="text/javascript">
        $(function() {



            $('#da-slider').cslider({

                autoplay: true,

                bgincrement: 450

            });



        });
    </script>



    <script type="text/javascript">
        $(document).ready(function() {



            var defaults = {

                containerID: 'toTop',

                containerHoverID: 'toTopHover',

                scrollSpeed: 1200,

                easingType: 'linear'

            };





            $().UItoTop({
                easingType: 'easeOutQuart'
            });



        });
    </script>


    <link href="css/portfolio.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/fliplightbox.min.js"></script>
    <script type="text/javascript">
        $('body').flipLightBox()
    </script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(function() {



            var filterList = {



                init: function() {




                    $('#portfoliolist').mixitup({

                        targetSelector: '.portfolio',

                        filterSelector: '.filter',

                        effects: ['fade'],

                        easing: 'snap',



                        onMixEnd: filterList.hoverEffect()

                    });



                },



                hoverEffect: function() {





                    $('#portfoliolist .portfolio').hover(function() {

                        $(this).find('.label').stop().animate({

                            bottom: 0

                        }, 200, 'easeOutQuad');

                        $(this).find('img').stop().animate({

                            top: -40

                        }, 500, 'easeOutQuad');

                    }, function() {

                        $(this).find('.label').stop().animate({

                            bottom: -40

                        }, 200, 'easeInQuad');

                        $(this).find('img').stop().animate({

                            top: 0

                        }, 300, 'easeOutQuad');

                    });



                }

            };





            filterList.init();



        });
    </script>



    <link rel="stylesheet" type="text/css" href="css/magnific-popup1.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $('.popup-with-zoom-anim').magnificPopup({

                type: 'inline',

                fixedContentPos: false,

                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,

                preloader: false,

                midClick: true,

                removalDelay: 300,

                mainClass: 'my-mfp-zoom-in'

            });

        });
    </script>
    <script type="text/javascript" src="js/jquery.lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
    <script type="text/javascript">
        $(function() {

            $('#portfoliolist a').lightBox();

        });
    </script>



    <script type="text/javascript" src="js/jquery.smint.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.subMenu').smint({

                'scrollSpeed': 1000

            });

        });
    </script>
    <script>
        window.addEventListener("load", function() {

            setTimeout(function() {

                window.scrollTo(0, 1);

            }, 0);

        });
    </script>
</head>

<body>



    <div class="slider_bg s7">



        <div id="da-slider" class="da-slider"><img src="images/bg.jpg" alt="" width="1920px" height="900px
          ">


        </div>




        <div class="h_right">
            <div class="subMenu">
                <div class="wrap">
                    <div class="inner">
                        <a href="#" id="sTop" class="subNavBtn">能力</a> <a href="#" id="s1" class="subNavBtn">作品</a> <a href="#" id="s2" class="subNavBtn">关于我们</a>



                        <div class="clearfix"> </div>
                    </div>
                </div>



            </div>

        </div>
        <p class="biaot">WELCOME</p>

        <div class="services sTop" id="services">
            <div class="wrap">



                <h3>SEVEN</h3>
                <p>能做什么？</p>
                <div class="col_1_of_3 span_1_of_3"> <img src="images/service1.png" alt="">
                    <h4><a href="#">绘画</a></h4>
                    <p>SEVEN拥有两名资深画师，满足你的一切需求</p>

                </div>
                <div class="col_1_of_3 span_1_of_3"> <img src="images/service2.png" alt="">
                    <h4><a href="#">设计</a></h4>
                    <p>我们的每一款设计都充满了爱</p>

                </div>
                <div class="col_1_of_3 span_1_of_3"> <img src="images/service3.png" alt="">
                    <h4><a href="#">APP交互</a></h4>
                    <p>交互领域是我们的专长</p>

                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="portfoliO s1" id="work">


            <div class="wrap">
                <h3>一些作品</h3>

                <div class="container">



                    </script>



                    <ul id="filters" class="clearfix">

                        <li> <span class="filter" data-filter="app  icon">插图</span> </li>
                        <li> <span class="filter" data-filter="card ">LOGO</span> </li>
                        <li> <span class="filter" data-filter="icon app card ">全部</span> </li>

                    </ul>
                    <div id="portfoliolist">
                        <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="" class="flipLightBox popup-with-zoom-anim"><img src="images/port.jpg" alt="Image 2" style="top: 0px;"> </a>
                            </div>
                        </div>
                        <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="images/port1.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port1.jpg" alt="Image 2" style="top: 0px;"> </a>
                            </div>
                        </div>
                        <div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="images/port2.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port2.jpg" alt="Image 2" style="top: 0px;"> </a>
                            </div>
                        </div>
                        <div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="images/port3.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"></a><img src="images/port3.jpg" alt="Image 2" style="top: 0px;"> </a>
                            </div>
                        </div>
                        <div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="images/port4.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port4.jpg" alt="Image 2" style="top: 0px;"> </a>
                            </div>
                        </div>
                        <div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
                            <div class="portfolio-wrapper">
                                <a href="images/port5.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port5.jpg" alt="Image 5" style="top: 0px;"> </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img">
                    <a href="#"><img src="images/zoom.png" alt=""></a>
                </div>
            </div>


        </div>



        <div class="team-members s2" id="about">
            <div class="wrap">
                <div class="tm-head">
                    <h3>ABOUT US</h3>

                </div>
                <div class="tm-head-grids">
                    <div class="tm-head-grid"> <img src="images/zxy.jpg" alt="" />

                        <h4>郑笑妍</h4>
                        <h5>绘画，网站设计</h5>
                        <a href="https://smiling-xiaoyan.gitee.io/smiling-has-a-website/" class="grwz">个人网站</a>
                        <ul class="top-social-icons">

                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="tm-head-grid"> <img src="images/psy.jpg" alt="" />
                        <h4>彭思宇</h4>
                        <h5>绘画，网站设计</h5><a href="http://peng-siyu.gitee.io/personal-website" class="grwz">个人网站</a>
                        <ul class="top-social-icons">

                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="tm-head-grid"> <img src="images/lzy.jpg" alt="" />
                        <h4>李宗洋</h4>
                        <h5>后期，网站制作</h5><a href="http://li-zongyang.gitee.io/final-assignment-4" class="grwz">个人网站</a>
                        <ul class="top-social-icons">

                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="tm-head-grid"> <img src="images/dh.jpg" alt="" />

                        <h4>戴衡</h4>
                        <h5>插画，头像设计</h5> <a href="http://kurumidess.gitee.io/personal-website/" class="grwz">个人网站</a>
                        <ul class="top-social-icons">

                            <div class="clear"> </div>
                        </ul>
                    </div>
                    <div class="clear"> </div>
                </div>
            </div>
        </div>



        <div class="experience">
            <div class="wrap">
                <div class="ex-head">
                    <h3>软件能力</h3>
                </div>
                <div class="prog">
                    <div class="text"> <span>AI</span> </div>
                    <div class="text_p"> <span>70%</span> </div>
                    <div class="clear"></div>
                    <div class="progress-bar-container" data-percent="70%">
                        <div class="progress-bar" style="width: 70%;"> </div>
                    </div>
                </div>
                <div class="prog1">
                    <div class="text"> <span>HTML/css</span> </div>
                    <div class="text_p"> <span>40%</span> </div>
                    <div class="clear"></div>
                    <div class="progress-bar-container" data-percent="90%">
                        <div class="progress-bar1" style="width: 40%;"> </div>
                    </div>
                </div>
                <div class="prog2">
                    <div class="text"> <span>PS</span> </div>
                    <div class="text_p"> <span>60%</span> </div>
                    <div class="clear"></div>
                    <div class="progress-bar-container" data-percent="90%">
                        <div class="progress-bar2" style="width: 60%;"> </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="studio s4" id="studio">
            <div class="wrap">
                <div class="studio-head">
                    <h3>联系我们</h3>
                    <p>QQ 973714392</p>
                </div>
            </div>
        </div>



        <script type="text/javascript" src="js/jquery.flexisel.js"></script>



        <script type="text/javascript">
            $(window).load(function() {

                $(".flexiselDemo3").flexisel({

                    visibleItems: 5,

                    animationSpeed: 1000,

                    autoPlay: true,

                    autoPlaySpeed: 3000,

                    pauseOnHover: true,

                    enableResponsiveBreakpoints: true,

                    responsiveBreakpoints: {

                        portrait: {

                            changePoint: 480,

                            visibleItems: 1

                        },

                        landscape: {

                            changePoint: 640,

                            visibleItems: 2

                        },

                        tablet: {

                            changePoint: 768,

                            visibleItems: 3

                        }

                    }

                });

            });
        </script>


    </div>
    </div>
    </div>
    </div>




    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {

            $(".scroll").click(function(event) {

                event.preventDefault();

                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1200);

            });

        });
    </script>
    <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
</body>

</html>